<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css">
</head>
<body>

<div class="demoTable">
    请输入订单ID编号：
    <div class="layui-inline">
        <input class="layui-input" name="id" id="ooId" autocomplete="off">
    </div>
    <button class="layui-btn" lay-submit lay-filter="formDemo">搜索</button>
</div>

<table id="demo" lay-filter="test"></table>

<script src="/lib/layui-v2.5.5/layui.js"></script>
<script>
    layui.use(['form', 'table', 'layer'], function () {
        var form = layui.form;     //控制表单
        var table = layui.table;   //控制表格
        var $ = layui.$  //Jquery对象
        var layer = layui.layer;   //控制弹出层

        var gPrice = document.getElementById("goodsPrice").value;
        var gCount = document.getElementById("count").value;
        var subPrice=gPrice*gCount;

        form.on('submit(formDemo)', function(data){
            var ooId = document.getElementById("ooId").value;

        //第一个实例
        table.render({
            elem: '#demo'
            , height: 450
            , url: '/orders/list?ooId='+ooId //数据接口
            , cellMinWidth: 500 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , page: true //开启分页
            , cols: [[ //表头
                {field: 'oid', title: 'ID', width: 80, fixed: 'left', sort: true}
                , {field: 'goodsName', title: '商品名字', width: 177, align: 'center', sort: true}
                , {field: 'goodsPrice', title: '商品价格', width: 177, align: 'center'}
                , {field: 'count', title: '数量', width: 177, align: 'center', sort: true}
                , {field: 'subtotal', title: '小计', width: 177, align: 'center', sort: true}
                , {field: 'createDate', title: '创建时间', width: 177, align: 'center'}
                , {field: 'upDates', title: '修改时间', width: 177, align: 'center'}
                , {fixed: 'right', width: 200, align: 'center', toolbar: '#barDemo'}
            ]]
        });
        });

        table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
            var data = obj.data; //获得当前行数据
            var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）


            if (layEvent === 'detail') { //查看

                $("input[name='oid']").val(data.oid)
                $("input[name='goodsName']").val(data.goodsName)
                $("input[name='goodsPrice']").val(data.goodsPrice)
                $("input[name='count']").val(data.count)
                $("input[name='subtotal']").val(data.subtotal)
                $("input[name='createDate']").val(data.createDate)
                $("input[name='upDates']").val(data.upDates)

                layer.open({
                    type: 1,
                    title: '查看',
                    content: $('#select'),
                    area: ['600px', '300px']
                });


                //do somehing
            } else if (layEvent === 'del') { //删除
                layer.confirm('真的删除行么', function (index) {

                    $.ajax({
                        url: "/orders/delete?oid=" + data.oid,
                        type: "GET",
                        dataType: "json",
                        success: function (data) {
                            console.log("删除成功")
                            obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                            layer.close(index);
                            //向服务端发送删除指令
                        }
                    })

                });
            } else if (layEvent === 'edit') { //编辑
                //do something
                $("input[name='oid']").val(data.oid)
                $("input[name='goodsName']").val(data.goodsName)
                $("input[name='goodsPrice']").val(data.goodsPrice)
                $("input[name='count']").val(data.count)
                $("input[name='subtotal']").val(data.subtotal)
                $("input[name='upDates']").val(data.upDates)
                layer.open({
                    type: 1,
                    title: '用户更新',
                    content: $('#updatelayui'),
                    area: ['600px', '300px']
                });

                form.on('submit(update)', function (data) {    //from表单中提交的按钮的id
                    $.ajax({
                        type: 'POST',
                        url: '/orders/update',
                        datatype: "json",
                        contentType: "application/json",
                        data: JSON.stringify(data.field),     //修改后的值
                        success: function (res) {     //成功后的回调函数  res返回的数据
                            console.log(data.field.id);
                            console.log(res)
                            if (res.code == '0') {
                                layer.msg("更新成功")
                                obj.update({
                                    oid: data.field.oid,
                                    goodsName: data.field.goodsName,
                                    goodsPrice: data.field.goodsPrice,
                                    count: data.field.count,
                                    subtotal: subPrice,
                                    createDate: data.field.createDate,
                                    upDates: data.field.upDates,
                                });

                            }
                        }
                    })
                    //同步更新缓存对应的值
                })
            } else if (layEvent === 'LAYTABLE_TIPS') {
                layer.alert('Hi，头部工具栏扩展的右侧图标。');
            }
        });

    });
</script>
</body>

<!--查看用户信息-->
<form class="layui-form" action="" id="select" style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">订单编号</label>
        <div class="layui-input-block">
            <input type="text" name="oid" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品名字</label>
        <div class="layui-input-block">
            <input type="text" name="goodsName" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">商品价格</label>
        <div class="layui-input-block">
            <input type="text" name="goodsPrice" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">数量</label>
        <div class="layui-input-block">
            <input type="text" name="count" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">小计</label>
        <div class="layui-input-block">
            <input type="text" name="subtotal" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">创建时间</label>
        <div class="layui-input-block">
            <input type="text" name="createDate" autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">修改时间</label>
        <div class="layui-input-block">
            <input type="text" name="upDates" autocomplete="off" class="layui-input">
        </div>
    </div>
</form>


<!--//用户更新-->
<form class="layui-form" action="" id="updatelayui" style="display: none">
    <form class="layui-form" action="">
        <input type="hidden" type="text" name="oid" autocomplete="off" class="layui-input">
        <input type="hidden" type="text" id="upDates" name="upDates" autocomplete="off" class="layui-input">
        <input type="hidden" type="text" id="subtotal" name="subtotal" autocomplete="off" class="layui-input">

        <div class="layui-form-item">
            <label class="layui-form-label">商品名字</label>
            <div class="layui-input-block">
                <input type="text" name="goodsName" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">商品价格</label>
            <div class="layui-input-block">
                <input type="text" name="goodsPrice" id="goodsPrice" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">数量</label>
            <div class="layui-input-block">
                <input type="text" name="count" id="count" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div>
            <button type="button" class="layui-btn" lay-submit lay-filter="update" style="margin: auto">更新</button>
        </div>
    </form>
    </div>
</form>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
</html>